
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <!-- 213 -->
        <li>1111</li>
        <li>2222</li>
    </ul>
    <script>
        // js中的节点和描述节点的属性
        // 元素节点
            // nodeType 1
            // nodeName 大写的标签名
            // nodeValue null
        // 文本节点
            // nodeType 3
            // nodeName #text
            // nodeValue 文本内容
        // 注释节点
            // nodeType 8
            // nodeName #commen
            // nodeValue 注释内容
        // 文档节点 document
            // nodeType 9
            // nodeName #document
            // nodeValue null

        // childNodes： 获取所有子节点
        // children： 获取所有元素子节点（子元素标签）
        // firstChild： 第一个子节点
        // lastChild： 最后一个子节点
        // const ul = document.querySelector('ul')
        // console.log(ul.lastChild);
        const box = document.querySelector('ul')
        console.log(box.childNodes);
        console.log(box.children);

        // 非ie6，7，8 会把空格当作文本节点
        // childNodes 包括 文本节点 注释节点
        // childrens 只获取元素节点 ie，6，7，8 会把注释节点也当作节点解析
    </script>
</body>
</html>